<template>
    <div class="container">
        <!-- 面包屑导航 -->
        <div class="breadcrumb">
            <el-breadcrumb separator="">
                <el-breadcrumb-item>
                    <div class="div1">客户管理</div>
                </el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/myCustomers' }">
                    <div class="div2">我的客户</div>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 面包屑导航 -->
        <!-- 查询客户列表 -->
        <el-collapse-transition>
            <div class="query"
                 v-show="!show3">
                <div class="header">
                    <span>查询客户</span>
                    <p @click="show3 = true">收起</p>
                </div>
                <div class="polling">
                    <el-form :inline="true"
                             ref="form"
                             :model="queryForm"
                             label-width=""
                             size="mini">
                        <el-form-item label="客户类型">
                            <el-select v-model="queryForm.clientType"
                                       filterable
                                       placeholder="请选择客户类型"
                                       clearable
                                       :default-first-option="true">
                                <el-option v-for="items in client"
                                           :key="items.dictId"
                                           :label="items.dictName"
                                           :value="items.dictId"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="信息">
                            <el-input placeholder="请输入客户姓名/手机号码"
                                      v-model="queryForm.info"></el-input>
                        </el-form-item>
                        <div class="selectDate">
                            <span>时间</span>
                            <div class="picker">
                                <el-date-picker v-model="date"
                                                type="daterange"
                                                unlink-panels
                                                range-separator="至"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                                format="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd"
                                                @input="immediUpdate">
                                </el-date-picker>
                            </div>
                        </div>
                        <el-form-item label="入线方式">
                            <el-select v-model="queryForm.Incoming"
                                       filterable
                                       placeholder="选择入线方式"
                                       clearable
                                       :default-first-option="true">
                                <el-option v-for="items in line"
                                           :key="items.id"
                                           :label="items.name"
                                           :value="items.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="客服">
                            <el-select v-model="queryForm.service"
                                       filterable
                                       clearable
                                       placeholder="请选择客服"
                                       :default-first-option="true">
                                <el-option v-for="items in customer"
                                           :key="items.id"
                                           :label="items.reallyName"
                                           :value="items.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="客户等级">
                            <el-select v-model="queryForm.category"
                                       filterable
                                       placeholder="请选择客户等级"
                                       clearable
                                       :default-first-option="true">
                                <el-option v-for="items in rank"
                                           :key="items.id"
                                           :label="items.name"
                                           :value="items.id"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="部门选择">
                            <el-cascader v-model="queryForm.orgName"
                                         :options="options"
                                         :props="{
                  checkStrictly: true,
                  label: 'orgName',
                  value: 'orgCode',
                  children: 'children',
                }"
                                         clearable
                                         filterable></el-cascader>
                        </el-form-item>

                        <el-form-item label="地区">
                            <levelAddr class="addressContent"
                                       :province="queryForm.province"
                                       :city="queryForm.city"
                                       :area="queryForm.area"
                                       @updateprovice="getAddrData"
                                       @updatecity="getCity"
                                       @updatearea="getArea"></levelAddr>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary"
                                       size="mini"
                                       @click="searchEvent()"
                                       v-on:keyup.enter="searchEvent">搜索</el-button>
                            <el-button plain
                                       size="mini"
                                       @click="reset">重置</el-button>
                            <!-- <el-button type="primary">导出数据</el-button> -->
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-collapse-transition>
        <!-- 查询客户列表 -->
        <!-- 分配用户列表 -->
        <div class="table">
            <div class="btns">
                <div class="div_div">
                    <el-button type="primary"
                               size="mini"
                               v-if="parArray.indexOf('addCustomerCode') != -1"
                               @click="addCustomer">添加客户</el-button>

                    <el-button type="primary"
                               size="mini"
                               @click="customerGuide"
                               v-if="parArray.indexOf('userExportCode') != -1">客户导出</el-button>
                    <el-button type="warning"
                               size="mini"
                               @click="customerMoneySum"
                               v-if="parArray.indexOf('userExportCode') != -1">导出客户消费总额</el-button>
                </div>

                <el-button size="mini"
                           type="primary"
                           v-if="show3"
                           @click="show3 = false">搜索展开</el-button>
            </div>
            <vxe-table size="medium"
                       class="tableCont"
                       align="center"
                       :data="tableData.list"
                       style="width: 100%"
                       :cell-style="{ padding: '2px' }">
                <vxe-table-column type="seq"
                                  title="序号"
                                  width="50"></vxe-table-column>
                <vxe-table-column title="姓名"
                                  min-width="100">
                    <template slot-scope="scope">
                        <el-popover placement="bottom-start"
                                    width="500"
                                    :offset="70"
                                    trigger="hover"
                                    :open-delay="500"
                                    @show="test(scope.row)">
                            <div>
                                <div style="margin-bottom: 5px">
                                    {{ scope.row.userName }}-进度
                                </div>
                                <p style="white-space: normal"
                                   v-for="(item, index) in scope.row.context"
                                   :key="index">
                                    {{ item }}
                                </p>
                            </div>
                            <p slot="reference"
                               class="nameClick"
                               @click="toInformation(scope.row, 1)">
                                {{ scope.row.userName }}
                            </p>
                        </el-popover>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="phone"
                                  title="手机号码"
                                  min-width="120">
                    <template slot-scope="scope">
                        <p v-if="is_null(scope.row.phoneTwo)">{{ scope.row.phone }}</p>
                        <div v-else>
                            <div>{{ scope.row.phone }}</div>
                            <div>{{ scope.row.phoneTwo }}</div>
                        </div>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="address"
                                  title="信息地址"
                                  show-overflow
                                  min-width="180"></vxe-table-column>
                <vxe-table-column title="客户等级/意向"
                                  min-width="120">
                    <template slot-scope="scope">
                        <p v-if="is_null(scope.row.userLevel)">--</p>
                        <p v-else>{{ scope.row.userLevel }}</p>

                        <span v-if="is_null(scope.row.userIntention)">--</span>
                        <span v-else>{{ scope.row.userIntention }}</span>
                    </template>
                </vxe-table-column>
                <!-- <el-table-column prop="userIntention" label="类型">	</el-table-column> -->
                <vxe-table-column title="客服人员"
                                  min-width="110">
                    <template slot-scope="scope">
                        <p :style="{ color: scope.row.status == 'A' ? '#333' : '#f56c6c' }">
                            {{ scope.row.customerName }}
                        </p>
                    </template>
                </vxe-table-column>

                <vxe-table-column field="ditchTime"
                                  title="入线渠道/时间"
                                  show-overflow
                                  min-width="130">
                    <template slot-scope="scope">
                        <p v-if="is_null(scope.row.userDitch)">--</p>
                        <p v-else>{{ scope.row.userDitch }}</p>

                        <p v-if="is_null(scope.row.ditchTime)">--</p>
                        <p v-else>{{ scope.row.ditchTime }}</p>
                    </template>
                </vxe-table-column>
                <vxe-table-column title="操作"
                                  width="270"
                                  fixed="right">
                    <template slot-scope="scope">
                        <el-tooltip class="item"
                                    effect="dark"
                                    content="添加订单"
                                    placement="top-start">
                            <p class="operation"
                               v-if="parArray.indexOf('mcAddorder') != -1"
                               @click="toAddOrder(scope.row)">
                                <span>添单</span>
                            </p>
                        </el-tooltip>

                        <el-tooltip class="item"
                                    effect="dark"
                                    content="转移客户"
                                    placement="top-start">
                            <p class="operation"
                               v-if="parArray.indexOf('assageWy') != -1"
                               @click="allocation(scope.row)">
                                <span>指派</span>
                                <!-- <img src="../../assets/assign.png" alt="" /> -->
                            </p>
                        </el-tooltip>
                        <el-tooltip class="item"
                                    effect="dark"
                                    content="编辑信息"
                                    placement="top-start">
                            <p class="operation"
                               v-if="parArray.indexOf('btnEditCode') != -1"
                               @click="toInformation(scope.row)">
                                <span>编辑</span>
                                <!-- <img src="../../assets/edit.png" alt="" /> -->
                            </p>
                        </el-tooltip>
                        <el-tooltip class="item"
                                    effect="dark"
                                    content="收货地址列表"
                                    placement="top-start">
                            <p class="operation"
                               v-if="parArray.indexOf('mcAddress') != -1"
                               @click="toAddress(scope.row)">
                                <span>收货地址</span>
                                <!--  <img
                  style="width:21px;"
                  src="../../assets/address.png"
                  alt=""
                /> -->
                            </p>
                        </el-tooltip>
                        <p class="operation"
                           v-if="parArray.indexOf('delectCustomerCode') != -1"
                           @click="delectCustomer(scope.row)">
                            <span>删除</span>
                        </p>

                        <el-tooltip class="item"
                                    effect="dark"
                                    content="历史订单列表"
                                    placement="top-start">
                            <p class="operation"
                               v-if="parArray.indexOf('mcOrder') != -1"
                               @click="tolist(scope.row)">
                                <span>历史</span>
                                <!-- <img style="width:21px;" src="../../assets/order.png" alt="" /> -->
                            </p>
                        </el-tooltip>
                    </template>
                </vxe-table-column>
            </vxe-table>
            <div style="height: 20px"></div>
            <!-- 分页start -->
            <div class="page"
                 v-if="tableData.totalNum > 0">
                <div class="block">
                    <el-pagination @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"
                                   :current-page="currentPage1"
                                   :page-sizes="[10, 20, 50, 100, 200]"
                                   :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="tableData.totalNum"
                                   prev-text="上一页"
                                   next-text="下一页">
                    </el-pagination>
                </div>
            </div>
            <!-- 分页end -->
        </div>
        <!-- 分配用户列表 -->
        <el-dialog :visible.sync="Visible"
                   :append-to-body="true"
                   title="分配资源">
            <div style="display: inline-block; margin: 0px 20px">
                员工姓名
                <el-input v-model="formTc.username"
                          placeholder="请输入员工姓名"
                          size="small"
                          style="width: 150px"></el-input>
            </div>
            <el-button size="mini"
                       @click="treeAxios(1)"
                       type="primary">
                搜索
            </el-button>
            <el-button size="mini"
                       @click="treeAxios(2)"
                       type="warning">
                重置
            </el-button>
            <div class="tree">
                <el-input style="margin: 0 0px 20px"
                          placeholder="输入关键字进行搜索"
                          v-model="filterText"></el-input>
                <el-tree class="el-menu-vertical-demo"
                         ref="tree"
                         :data="tree"
                         :props="defaultProps"
                         :highlight-current="true"
                         @node-click="handleNodeClick"
                         :default-expand-all="true"
                         :filter-node-method="filterNode"></el-tree>
            </div>
            <div class="table1">
                <el-table ref="multipleTable"
                          @selection-change="handleSelectionChange"
                          :data="tablePerson.list"
                          style="width: 100%"
                          :row-key="getRowKey">
                    <el-table-column type="selection"
                                     :reserve-selection="true"
                                     width="50"
                                     align="center"
                                     v-model="multipleSelection"></el-table-column>
                    <el-table-column label="序号"
                                     type="index"
                                     width="100"></el-table-column>
                    <el-table-column label="姓名">
                        <template slot-scope="props">
                            <p>{{ props.row.reallyName }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="联系电话"
                                     prop="phoneNumber"></el-table-column>
                    <el-table-column label="所在部门">
                        <template slot-scope="props">
                            <span>{{ props.row.orgName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="职位"
                                     prop="positionName"></el-table-column>
                    <el-table-column label="员工状态"
                                     prop="statusName"></el-table-column>
                </el-table>
            </div>
            <!-- 弹突层分页start -->
            <div class="page2"
                 v-if="tablePerson.totalNum > 0">
                <div class="block">
                    <el-pagination @size-change="handleSizeEmplay"
                                   @current-change="handleCurrentEmplay"
                                   :current-page.sync="stafpage"
                                   :page-size="stafPageSize"
                                   layout="total,sizes,prev, pager, next"
                                   prev-text="上一页"
                                   next-text="下一页"
                                   :total="tablePerson.totalNum">
                    </el-pagination>
                </div>
            </div>
            <!-- 分页end -->
            <div slot="footer"
                 class="dialog-footer">
                <el-button size="mini"
                           @click="
            Visible = false;
            toggleSelection();
          ">取 消</el-button>
                <el-button size="mini"
                           type="primary"
                           @click="
            Visible = false;
            submission();
          ">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 分配用户列表 -->
    </div>
</template>

<script>
import levelAddr from '@/components/levelAddr'
export default {
  components: {
    levelAddr
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  data () {
    return {
      show3: false,
      queryForm: {
        info: '',
        Incoming: '',
        service: '',
        category: '',
        province: '',
        city: '',
        area: '',
        type: [],
        orgName: '',
        clientType: ''
      },
      date: '',
      tableData: [],
      currentPage1: 1,
      pageSize: 10,
      line: [],
      rank: [],
      customer: [],
      limits: '',
      parArray: [],
      client: [],
      options: [],
      height: '500px',
      filterText: '',
      data: [],
      tree: [],
      formTc: {
        username: ''
      },
      defaultProps: {
        children: 'children',
        label: 'orgName'
      },
      Visible: false,
      multipleTable: [],
      multipleSelection: '',
      tablePerson: [],
      stafpage: 1,
      stafPageSize: 10,
      beginTime: '',
      endTime: ''
    }
  },
  created () {
    this.commentAxios()
    this.customerlist()
    this.department()
    // 权限设定判断 normsCode
    this.limits = JSON.parse(sessionStorage.getItem('limit'))
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === 'myCustomersCode'
    )
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code)
    })
    // 权限设定判断 normsCode
    const saleId = JSON.parse(sessionStorage.getItem('salesAuthorityId'))
    /*
        if (
            saleId == "" ||
            saleId == undefined ||
            sessionStorage.getItem("positionCode") == "manager"
        ) {
            this.queryForm.clientType = "4";
        } else {
            this.queryForm.clientType = "1";
        }
        */
    this.queryForm.clientType = '1'
    this.listAxios(1)

    const _this = this
    document.onkeydown = function (e) {
      const key = window.event.keyCode
      if (key == 13) {
        _this.searchEvent()
      }
    }
    // this.customerlist();
  },
  beforeRouteLeave (to, form, next) {
    document.onkeydown = null
    next()
  },
  activated () {
    // this.commentAxios();
    // let saleId = JSON.parse(sessionStorage.getItem("salesAuthorityId"));
    // if (
    // 	saleId == "" ||
    // 	saleId == undefined ||
    // 	sessionStorage.getItem("positionCode") == "manager"
    // ) {
    // 	this.queryForm.clientType = "4";
    // } else {
    // 	this.queryForm.clientType = "1";
    // }
    this.listAxios(1)
  },
  methods: {
    immediUpdate (e) {
      this.$nextTick(() => {
        if (e == null) {
          this.beginTime = ''
          this.endTime = ''
        } else {
          this.$set(this, 'date', [e[0], e[1]])
        }
      })
    },

    test (e) {
      this.axios
        .get('/order/comm/customertracking/list?id=' + e.id, {
          headers: {
            isLoading: false
          }
        })
        .then((r) => {
          const tempArr = []
          // for (let t of r.data) {
          tempArr.push(
            '' +
                        r.data[0].customerName +
                        ':' +
                        r.data[0].comment +
                        ', 时间：' +
                        r.data[0].createdTime
          )
          this.$set(e, 'context', tempArr)
          // }
        })
    },

    // 导出客户信息
    customerGuide: _.debounce(function () {
      let beginTime = ''
      let endTime = ''
      if (this.date) {
        beginTime = this.date[0] + ' 00:00:00'
        endTime = this.date[1] + ' 23:59:59'
      }

      if (
        !sessionStorage.getItem('userInfo').salesAuthorityId &&
                (!beginTime || !endTime)
      ) {
        this.$message.warning('团队太大，请选择时间区间导出数据')
        return false
      }
      this.axios
        .post('/order/comm/customeruser/userExport', {
          request: {
            dataScope: '',
            endTime: endTime,
            startTime: beginTime
          },
          version: ''
        })
        .then((res) => {
          if (res.code == 0) {
            this.downloadlink(res.data)
          } else {
            this.$message.error(res.message)
          }
        })
    }, 300),
    customerMoneySum: _.debounce(function () {
      let beginTime = ''
      let endTime = ''
      if (this.date) {
        beginTime = this.date[0] + ' 00:00:00'
        endTime = this.date[1] + ' 23:59:59'
      }
      if (!sessionStorage.getItem('userInfo').salesAuthorityId && (!beginTime || !endTime)) {
        this.$message.warning('团队太大，请选择时间区间导出数据')
        return false
      }
      this.axios.post(
        '/order/comm/customeruser/money/sumExport',
        {
          request: {
            dataScope: '',
            endTime: endTime,
            startTime: beginTime,
            // 直接使用userId字段做金额的过滤了,懒得加字段，毕竟钱给的不多，写完后端还得来写前端
            userId: this.queryForm.info
          },
          version: ''
        }).then(res => {
        if (res.code == 0) {
          this.downloadlink(res.data)
        } else {
          this.$message.error(res.message)
        }
      })
    }, 300),

    // 删除用户
    delectCustomer (row) {
      this.$confirm('确定删除此客户，删除后将无法复原, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.axios
            .get('/order/comm/customeruser/delete?id=' + row.id, {
              isLoading: false
            })
            .then((res) => {
              if (res.code == 0) {
                this.$message.success('删除成功!')
                this.listAxios()
              } else {
                this.$message.error(res.message)
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    treeAxios (e) {
      if (e == 1) {
        this.stafpage = 1
        // this.stafPageSize = 10;
      }
      if (e == 2) {
        this.stafpage = 1
        this.stafPageSize = 10
        this.formTc.username = ''
      }
      this.axios
        .post('/sys/v1/org/tree/select', {
          request: {
            orgName: '',
            status: ''
          },
          version: ''
        })
        .then((res) => {
          if (res.code == 0) {
            this.tree = res.data
            this.staiffList(res.data[0].orgCode)
          }
        })
    },
    getRowKey (row) {
      return row.id
    },
    filterNode (value, data) {
      if (!value) return true
      return data.orgName.indexOf(value) !== -1
    },
    allocation (row) {
      this.Visible = true
      this.treeAxios()
      this.selectionCustomer = row.id
    },
    //* *数据请求**//
    handleNodeClick (data) {
      this.orgCode = data.orgCode
      this.staiffList(data.orgCode)
    },
    /** *员工列表***/
    staiffList (orgCode) {
      this.axios
        .post(
          '/sys/v1/user/employee/list',
          {
            request: {
              endTime: '',
              keyWord: this.formTc.username,
              orgCode: orgCode,
              pageNo: this.stafpage,
              pageSize: this.stafPageSize,
              phoneNumber: '',
              positionCode: '',
              reallyName: '',
              startTime: '',
              status: 'A',
              username: ''
            },
            version: ''
          },
          {
            headers: {
              isLoading: false
            }
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.tablePerson = res.data
          } else {
            this.$message.error(res.message)
          }
        })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 分配客户成功
    submission: _.debounce(function () {
      this.axios
        .get(
          '/order/comm/customeruser/update/customerId?customerServiceId=' +
                    this.multipleSelection[0].id +
                    '&customerUserId=' +
                    this.selectionCustomer,
          {
            headers: {
              isLoading: false
            }
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.$message.success('分配成功')
            this.listAxios(1)
            this.$refs.multipleTable.clearSelection()
          } else {
            this.$message.error(res.message)
          }
        })
    }, 300),

    listAxios () {
      let beginTime = ''
      let endTime = ''
      if (!this.is_null(this.date)) {
        beginTime = this.date[0] + ' 00:00:00'
        endTime = this.date[1] + ' 23:59:59'
      }
      this.axios
        .post('/order/comm/customeruser/list', {
          address:
                        this.queryForm.province + this.queryForm.city + this.queryForm.area,
          customerId: this.queryForm.service,
          pageNo: this.currentPage1,
          pageSize: this.pageSize,
          keyWord: this.queryForm.info,
          phone: '',
          userDitch: this.queryForm.Incoming,
          userIntention: '',
          userLevel: this.queryForm.category,
          type: this.queryForm.clientType,
          endTime: endTime,
          startTime: beginTime,
          userType: '',
          orgCode: this.queryForm.orgName[this.queryForm.orgName.length - 1]
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.tableData = res.data
          } else {
            this.$message.error(res.message)
          }
        })
    },
    reset: _.debounce(function () {
      this.queryForm = {
        info: '',
        Incoming: '',
        service: '',
        category: '',
        province: '',
        city: '',
        area: '',
        type: [],
        orgName: ''
      }
      this.date = ''

      const saleId = JSON.parse(sessionStorage.getItem('salesAuthorityId'))
      if (
        saleId == '' ||
                saleId == undefined ||
                sessionStorage.getItem('positionCode') == 'manager'
      ) {
        this.queryForm.clientType = '4'
      } else {
        this.queryForm.clientType = '1'
      }
      this.currentPage1 = 1
      this.pageSize = 10
      this.listAxios(1)
    }, 300),
    // 部门选择列表
    department () {
      this.axios
        .post(
          '/sys/v1/org/tree/select',
          {
            request: {
              orgName: '',
              orgType: ''
            },
            version: ''
          },
          {
            headers: {
              isLoading: false
            }
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.options = res.data
          } else {
            this.$message.error(res.message)
          }
        })
    },
    tolist (row) {
      if (row.customerType != '4') {
        this.$router.push({
          name: 'customerListOrder',
          query: {
            id: row.id
          }
        }) // userId就是用户id
      } else {
        this.$message.warning('无权限操作')
      }
    },
    addCustomer () {
      this.$router.push({
        name: 'addCustomer'
      }) // userId就是用户id
    },
    toAddOrder (row) {
      if (row.customerType != '4') {
        if (row.address) {
          this.$router.push({
            name: 'add_order',
            query: {
              userId: row.id,
              pingZ: true
            }
          }) // userId就是用户id
          sessionStorage.removeItem('goodsList')
          sessionStorage.removeItem('giftList')
          sessionStorage.removeItem('voucher')
        } else {
          this.$message.warning('地址不能为空，请点【编辑】进行操作')
        }
      } else {
        this.$message.warning('无权限操作')
      }
    },
    // 客户下拉框数据
    customerlist () {
      this.axios
        .get(
          '/sys/v1/user/employee/by/sales/authority?salesAuthorityId=' +
                    JSON.parse(sessionStorage.getItem('salesAuthorityId').split(',')),
          {
            headers: {
              isLoading: false
            }
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.customer = res.data
          } else {
            this.$message.error(res.message)
          }
        })
    },
    getAddrData (val) {
      this.queryForm.province = val
      if (!val) {
        this.queryForm.city = ''
        this.queryForm.area = ''
      }
    },
    getCity (val) {
      this.queryForm.city = val
    },
    getArea (val) {
      this.queryForm.area = val
    },
    //* * 普通数据请求 **//
    commentAxios () {
      // 入线方式
      this.axios
        .get('/order/comm/customeruser/selectCustomerditch', {
          headers: {
            isLoading: false
          }
        })
        .then((res) => {
          if (res.code == 0) {
            this.line = res.data
          } else {
            this.$message.error(res.message)
          }
        })
      /* 客户类型*/
      this.axios
        .get('/sys/v1/common/by/group?groupId=' + 'customer_type', {
          headers: {
            isLoading: false
          }
        })
        .then((res) => {
          console.log(res)
          if (res.code == 0) {
            if (JSON.parse(sessionStorage.getItem('salesAuthorityId')) == '1') {
              const data = res.data.filter(
                (res) => res.dictId == 1 || res.dictId == 4
              )
              this.client = data
            } else {
              this.client = res.data
            }
          } else {
            this.$message.error(res.message)
          }
        })
      /* 等级*/
      this.axios
        .get('/order/comm/customeruser/selectCustomerlevel', {
          headers: {
            isLoading: false
          }
        })
        .then((res) => {
          // console.log(res)
          if (res.code == 0) {
            this.rank = res.data
          } else {
            this.$message.error(res.message)
          }
        })
    },
    //* * 普通数据请求 **//
    // 弹出层分页
    handleCurrentEmplay (val) {
      this.stafpage = val
      this.staiffList(this.orgCode)
    },
    handleSizeEmplay (val) {
      this.stafPageSize = val
      this.staiffList(this.orgCode)
    },
    // 分页
    handleCurrentChange (val) {
      this.currentPage1 = val
      this.listAxios()
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.listAxios()
    },

    // 跳转客户资料
    toInformation (row, t) {
      if (
        row.customerType != '4' &&
                this.parArray.indexOf('btnEditCode') != -1
      ) {
        // || this.parArray.indexOf("customeruserDetail") != -1
        this.$router.push({
          name: 'customerInformation',
          query: {
            id: row.id,
            navName: 1
          }
        })
      } else {
        this.$message.warning('无权限操作')
      }
    },
    // 跳转地址
    toAddress (row) {
      if (row.customerType != '4') {
        this.$router.push({
          name: 'addressList',
          query: {
            id: row.id
          }
        })
      } else {
        this.$message.warning('无权限操作')
      }
    },
    //* * 模糊查询数据 **//
    searchEvent: _.debounce(function () {
      this.currentPage1 = 1
      // this.pageSize = 10;
      this.listAxios('1')
    }, 300),
    is_null (content) {
      if (content) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style scoped lang="scss">
.div1 {
    margin-left: -16px;
    background: url(../../assets/breadcrumb2.png);
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #2d7edf;
}

.div2 {
    margin-left: -16px;
    background: url(../../assets/breadcrumb1.png);
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #fff;
}

.btns {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.table {
    margin-top: 10px;
}

.tableCont {
    margin-bottom: 25px;
}

/deep/.vxe-cell--title {
    color: #2d7edf;
}

.nameClick:hover {
    cursor: pointer;
}

/deep/.distpicker-address-wrapper select {
    padding: 0rem 0.75rem;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
}

.query {
    background: #fff;
    padding: 10px;

    .el-form-item {
        display: inline-block;
        margin-right: 20px;
        margin-bottom: 8px;
    }
}

.header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    span {
        font-size: 15px;
    }
    p {
        font-size: 12px;
        color: #2d7edf;
    }
    p:hover {
        cursor: pointer;
    }
}

// /deep/ .query .el-input__inner{
// 		width:180px;
// }
@media screen and (max-width: 600px) {
    /deep/ .query .el-input__inner {
        width: 100px;
    }
}

.selectDate {
    display: inline-block;
    margin-right: 20px;

    span {
        display: inline-block;
        font-size: 15px;
        margin-right: 15px;
        vertical-align: middle;
    }

    .picker {
        display: inline-block;
        vertical-align: middle;
    }

    /deep/.el-input__inner {
        width: 250px;
        height: 28px;
        line-height: 28px;
    }

    /deep/ .el-date-editor .el-range__icon {
        line-height: 23px;
    }

    /deep/ .el-date-editor .el-range-separator {
        line-height: 23px;
    }

    /deep/.el-date-editor .el-range__close-icon {
        line-height: 22px;
    }
}

.operation {
    // float:left;
    display: inline-block;
    vertical-align: middle;
    margin-left: 12px;
    span {
        color: #2d7ddf;
    }
    img {
        width: 25px;
        height: 25px;
    }
}

.operation:hover {
    cursor: pointer;
}

.table {
    /deep/.el-table td,
    .el-table th {
        text-align: center;
    }

    /deep/ .el-table th > .cell {
        text-align: center;
        color: rgb(45, 125, 223);
        font-size: 15px;
    }

    /deep/.el-table__row:hover {
        color: rgb(45, 125, 223);
    }
}

.page {
    text-align: right;
    width: 100%;
    background: #f5f5f5;
    padding-right: 20px;
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 5;

    span {
        font-size: 14px;
        color: #666;
        display: inline-block;
        margin-left: 10px;
    }

    .el-pagination {
        display: inline-block;
        vertical-align: middle;
    }
}

.page2 {
    text-align: right;
    // width: 100%;
    // background: #f5f5f5;
    padding-right: 20px;

    span {
        font-size: 14px;
        color: #666;
        display: inline-block;
        margin-left: 10px;
    }

    .el-pagination {
        display: inline-block;
        vertical-align: middle;
    }
}

.table1 {
    display: inline-block;
    height: 500px;
    margin-left: 15px;
    width: 740px;
    overflow-y: scroll;

    /deep/.el-input__inner {
        width: 100px;
        height: 28px;
        line-height: 28px;
    }
}

.tree {
    height: 600px;
    overflow-y: scroll;
    width: 250px;
    float: left;

    /deep/.el-input__inner {
        width: 200px;
        height: 28px;
        line-height: 28px;
    }
}

/deep/.el-dialog__body {
    padding: 15px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
}

/deep/.el-dialog__header {
    background: #409eff;
    padding: 10px 20px 10px;

    .el-dialog__title {
        color: #fff;
    }
}

/deep/.el-dialog {
    position: relative;
    margin: 0 auto 50px;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    width: 1052px;
    height: 700px;
    z-index: 1000;
}

/deep/.el-dialog__headerbtn {
    top: 15px;
}

/deep/.el-dialog__headerbtn .el-dialog__close {
    // color: #fff;
}
</style>
